<template>
  <div class="row">
      <button v-if="showPreBtn" class="page-btn control" @click="select(+current - 1)">上一页</button>
      <button v-if="showFirstBtn" class="page-btn num" @click="select(1)">1</button>
      <span class="ellipsis-wrap" v-if="showFirstEllipsis">...</span>
      <button class="page-btn num" :class="item === current && 'page-btn-active'" v-for="(item,index) in pageList" :key="index" @click="select(item)">{{item}}</button>
      <span class="ellipsis-wrap" v-if="showLastEllipsis">...</span>
      <button v-if="showLastBtn" class="page-btn num" @click="select(count)">{{count}}</button>
      <button v-if="showNextBtn" class="page-btn control" @click="select(+current + 1)">下一页</button>  
  </div>
</template>
<script>
export default {
    data() {
        return {
            startIndex: 0,
            showWidth: Math.min(6,this.count)
        }
    },
    computed: {
        showPreBtn() {
            return this.currentInex !== this.startIndex;
        },
        showNextBtn() {
            const {count: pageCount,currentInex} = this;
            return currentInex !== pageCount - 1;
        },
        showFirstBtn() {
            return this.pageList[0] > 1;
        },
        showLastBtn() {
            const {count: pageCount} = this;
            return this.pageList[this.pageList.length - 1] < pageCount;
        },
        showFirstEllipsis() {
            return this.pageList[0] > 2;
        },
        showLastEllipsis() {
            const {count: pageCount} = this;
            return this.pageList[this.pageList.length - 1] < pageCount - 1;
        },
        currentInex() {
            return this.current - 1;
        },
        pageList() {
            const {currentInex,count: pageCount,startIndex,showWidth} = this;
            const halfWidth = Math.floor(showWidth/2);
            const list = [];
            let start,end;
            if (startIndex <= currentInex - halfWidth && currentInex + halfWidth <= pageCount ) { // 
                start = currentInex - halfWidth,
                end = currentInex + halfWidth
            } else {
                if (startIndex > currentInex - halfWidth) {
                    start = startIndex,
                    end = startIndex + showWidth;
                } else {
                    end = pageCount;
                    start = pageCount - showWidth;
                }
            }
            for (let i = start; i < end; i++) {
                list.push(i+1);
            }
            console.log(...list);
            return list;
        }
    },
    props: {
        count: { // 页数
            type: Number,
            default: 1,
            required: true
        },
        current: { // 当前页
            type: Number,
            default: 1
        },
        select: { // 点击页数回调方法
            type: Function,
            default: pageNo => {}
        }
    }
}
</script>
<style lang="stylus" scoped>
.page-btn
    border: solid 1px #ccc;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    color: #000;
    outline: none;
    cursor: pointer;
    &.num {
        width: 36px;
    }
    &.control {
        padding: 0 12px;
    }
    &.page-btn-active,&:hover {
        border-color: #ee2b29;
        background-color: #ee2b29;
        color: #fff;
    }
.ellipsis-wrap {
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
</style>

